<template>
  <div>
    <p>
      处理批次号：<a-input :maxLength="128" style="width: 200px" v-model.trim="batchNo" />
      <a-button
        v-if="!bathFlag"
        style="margin-left: 20px"
        type="primary"
        @click="searchBath"
      >
        查询批次
      </a-button>
      <a-button
        v-if="bathFlag"
        style="margin-left: 20px"
        @click="
          () => {
            batchNo = null;
            bathFlag = false;
            BathTableData = [];
            waybillTableData = [];
          }
        "
      >
        切换批次
      </a-button>
    </p>
    <a-table
      :columns="BathColumns"
      :data-source="BathTableData"
      :pagination="false"
    >
      <!-- 接收时间 -->
      <span slot="createTime" slot-scope="text, record">
        {{
          record.createTime === null || record.createTime === ""
            ? "暂无"
            : record.createTime.replace("T", " ")
        }}
      </span>
      <!-- 状态-->
      <span slot="batchState" slot-scope="text, record">
        <span style="color: #3eae7c">
          {{ record.batchState === "52" ? "已发货" : "已发货" }}
        </span>
      </span>
    </a-table>

    <p style="margin-top: 20px">
      运单号：<a-input :maxLength="128" style="width: 300px" v-model.trim="waybillNo" />
      <a-button style="margin-left: 20px" type="primary" @click="isScan">
        确认扫描
      </a-button>
    </p>
    <a-table
      :columns="waybillColumns"
      :data-source="waybillTableData"
      :pagination="false"
    >
      <!-- 接收时间 -->
      <span slot="createTime" slot-scope="text, record">
        {{
          record.createTime === null || record.createTime === ""
            ? "暂无"
            : record.createTime.replace("T", " ")
        }}
      </span>
      <!-- 状态-->
      <span slot="applyState" slot-scope="text, record">
        <span style="color: #3eae7c">
          {{ record.applyState === "35" ? "已发货" : "已发货" }}
        </span>
      </span>
      <!-- SKU信息 -->
      <span slot="recordList" slot-scope="text, record">
        <!-- {{}} -->
        <div v-for="item in record.recordList" :key="item.key">
          {{ item.sku + " * " + item.inputNumber }}
        </div>
      </span>
      <span slot="action" slot-scope="text, record">
        <a
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
          @click="printWaybill(record)"
          >打印运单
        </a>
      </span>
    </a-table>
  </div>
</template>

<script>
import {
  Outbounddel_shippedBatch,
  Outbounddel_waybillno
} from "@/apis/clientSide/OrderManage/Outbound";
import { OutBound_dowWay } from "@/apis/system/WM/OutOrder";
import req from "@/utils/req.js";
import moment from "moment";
export default {
  data() {
    return {
      bathFlag: false,
      BathTableData: [],
      waybillTableData: [],
      batchNo: null,
      waybillNo: null
    };
  },
  methods: {
    //   查询批次
    async searchBath() {
      let { code, responseBody } = await Outbounddel_shippedBatch(this.batchNo);
      if (code === "200") {
        if (responseBody) {
          this.BathTableData.push(responseBody);
          this.bathFlag = true;
        } else {
          this.$message.error("未查询到相关数据！");
          return false;
        }
      }
    },
    //扫描运单
    async isScan() {
      let { code, responseBody } = await Outbounddel_waybillno(
        this.waybillNo.substring(this.waybillNo.length - 12),
        this.batchNo
      );
      if (code === "200") {
        if (responseBody) {
          this.waybillTableData.push(responseBody);
          this.waybillNo = null;
          //   responseBody.key = this.waybillTableData.length - 1;
          responseBody.scanTime = moment().format("YYYY-MM-DD hh:mm:ss");
        } else {
          this.$message.error("未查询到相关数据！");
          return false;
        }
      } else {
        // this.$message.error(message);
        return false;
      }
    },
    async printWaybill(record) {
      let res = await OutBound_dowWay(`pam=${record.key}&`);
      req.exportPDF("运单文件", res);
    }
  },
  computed: {
    BathColumns() {
      return [
        {
          title: "仓库",
          dataIndex: "warehouseName",
          align: "center",
          scopedSlots: { customRender: "warehousingName" },
          width: "10%"
        },
        {
          title: "批次号",
          dataIndex: "bachNo",
          align: "center",
          scopedSlots: { customRender: "bachNo" },
          width: "9%"
        },
        {
          title: "批次名称",
          dataIndex: "bachName",
          align: "center",
          width: "9%"
        },
        {
          title: "订单数",
          dataIndex: "orderNumber",
          // ellipsis: true,
          scopedSlots: { customRender: "orderNumber" },
          align: "center",
          width: "9%"
        },
        {
          title: "扫描订单数",
          dataIndex: "scanNumber",
          scopedSlots: { customRender: "scanNumber" },
          align: "center",
          width: "8%"
          // ellipsis: true,
        },
        {
          title: "状态 ",
          dataIndex: "batchState",
          scopedSlots: { customRender: "batchState" },
          align: "center",
          width: "9%"
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          scopedSlots: { customRender: "createTime" },
          align: "center",
          width: "9%"
        },
        {
          title: "认领人",
          dataIndex: "claimName",
          scopedSlots: { customRender: "claimName" },
          align: "center",
          width: "9%"
        }
      ];
    },
    waybillColumns() {
      return [
        {
          title: "订单编号",
          dataIndex: "orderNumber",
          align: "center",
          scopedSlots: { customRender: "orderNumber" },
          width: "10%"
        },
        {
          title: "运单号",
          dataIndex: "waybillNo",
          align: "center",
          scopedSlots: { customRender: "waybillNo" },
          width: "9%"
        },
        {
          title: "SKU*数量",
          dataIndex: "recordList",
          align: "center",
          width: "9%",
          scopedSlots: { customRender: "recordList" }
        },
        {
          title: "状态",
          dataIndex: "applyState",
          scopedSlots: { customRender: "applyState" },
          align: "center",
          width: "8%"
          // ellipsis: true,
        },
        {
          title: "扫描时间",
          dataIndex: "scanTime",
          scopedSlots: { customRender: "scanTime" },
          align: "center",
          width: "9%"
        },
        {
          title: "备注",
          dataIndex: "remark",
          scopedSlots: { customRender: "remark" },
          align: "center",
          width: "9%"
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "9%"
        }
      ];
    }
  }
};
</script>

<style lang="less" scoped></style>
